<template>
  <a-modal
      :visible="visible"
      title='编辑'
      okText='确认'
      @cancel="() => { $emit('cancel') }"
      @ok="() => { $emit('create') }"
    >
      <a-form layout='vertical' :form="form" >
      <a-form-item label="所有者：">{{ this.mapInfo.userName }}</a-form-item>
        <a-form-item label='名称：'>
          <a-input
            style="width: 100%"
            v-decorator="[
              'name',
              {
                rules: [{ required: true, message: '请输入名称!' }],
                initialValue : this.mapInfo.name,
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="类型：">{{ this.mapInfo.sourceType }}</a-form-item>
        <a-form-item label="标签:">  
            <!--rules: [{ required: true, message: '请选择至少一个标签',trigger:'blur' }],  -->
            <a-select
                mode="multiple"
                placeholder="请选择标签"
                style="width: 100%"
                @change="handleChangeTags"
                v-decorator="['tags',
                {
                    initialValue : this.mapInfo.tags,         
                },
                ]"
                >
                <a-select-option value="用户场景" key="0">
                    用户场景
                </a-select-option>
                <a-select-option value="地图" key="1">
                    地图
                </a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="地址："><a :href="this.mapInfo.url">{{ this.mapInfo.url }}</a></a-form-item>
        
        <a-form-model-item label="缩略图:">
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="/sys/common/upload"
            :before-upload="beforeUpload"
          >
            <img :src="this.mapInfo.thumbnail" alt="avatar" class="myimg"/>
          </a-upload>          
        </a-form-model-item>

        <a-form-item label='资源描述：'>
          <a-input
            style="width: 100%"
            type='textarea'
            v-decorator="['description',
            {
                rules: [{ required: true, message: '请输入至少五个字符' },
                { min:5,message: '请至少输入五个字符',trigger:'blur'}],
                initialValue:this.mapInfo.description
            },
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
</template>

<script>

function getBase64(img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

export default {
  name: 'mapModel', 
  data(){
    return{
      loading: false,
    }
  },
  //从父组件传来的参数
  props: [
    'visible',
    'mapInfo'     
    ],
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'form' });
  },
  methods:{
    handleChangeTags(value) {      
      // console.log(`Selected: ${value}`);
    },
    //图片
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('只支持jpg格式!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片必须小于2M!')
      }
      return isJpgOrPng && isLt2M
    },
  }
}
  
</script>

<style lang="less" scoped>
  /deep/ .ant-form-item-label{
    padding: 0px;
  }
  /deep/.ant-modal-body{
    padding: 10px 10%;
  }
  /deep/.ant-form-item{
    margin-bottom: 10px;
  }
  .myimg{
    width: 180px;
    height: 140px;
  }

</style>